<template>
  <div class="LogiPage">

        <div class="login-form">
                <div class="input_wrap mt_30">
                    <div class="fr input_main">
                        <input type="text" v-model="form.loginName" class="input_item" placeholder="请输入用户名" />
                    </div>
                </div>

                <div class="input_wrap">
                    <div class="fr input_main">
                        <input type="password" v-model="form.pwd" class="input_item" placeholder="请输入登陆密码" />
                    </div>
                </div>



                <div class="input_wrap">
                    <div class="fr input_main check_code_main">
                        <input type="text" v-model="form.checkCode" class="input_item checkCode" placeholder="请输入图片中的验证码" />
                        <img src="../assets/checkCode.png" class="input_item checkCodeImage" alt="" />
                    </div>
                </div>

                <div class="input_wrap mtb_5 clearfix">
                    <div class="fr input_main">
                        <label class="chk" for="quickLogin">
                            <input v-model="form.quickLogin" type="checkbox" id="quickLogin" name="quickLogin" />
                            <i>✓</i>记住登陆状态
                        </label>
                    </div>
                </div>

                <div class="input_wrap mt_0">
                    <div class="fr input_main btns_wrap">
                        <button class="m_btn m_btn_large m_green fl" v-on:click="submit">登 陆</button>
                        <button class="m_btn m_btn_large fr" v-on:click="resetGo">重 置</button>
                    </div>

                </div>
            </div>


  </div>
</template>

<script>
import { getUserInfo, loginIn, loginFailFn } from "../service/UserSerice.js";

export default {
  name: "HelloWorld",
  data() {
    return {
      form: {
        loginName: "admin",
        pwd: "123456",
        checkCode: "",
        quickLogin: false
      }
    };
  },
  created() {},
  methods: {
    submit: function() {
      var that = this;

      if (this.form.loginName == "") {
        this.$notify.error({
          title: "错误",
          message: "用户名不能为空!"
        });
        return false;
      }

      var re = new RegExp(/^[a-zA-Z0-9_-]{4,16}$/);
      if (!re.test(this.form.loginName)) {
        this.$notify.error({
          title: "错误",
          message: "用户名要求长度4~16位,字母，数字，下划线，减号!"
        });
        return false;
      }

      if (this.form.pwd == "") {
        this.$notify.error({
          title: "错误",
          message: "密码不能为空!"
        });
        return false;
      }

      var re = new RegExp(/^[A-Za-z0-9]{6,16}$/);
      if (!re.test(this.form.pwd)) {
        this.$notify.error({
          title: "错误",
          message: "密码要求6-16字母数字组成"
        });
        return false;
      }

      if (this.form.checkCode == "") {
        this.$notify.error({
          title: "错误",
          message: "验证码不能为空!"
        });
        return false;
      }

      var re = new RegExp(/^[A-Za-z0-9]{4,6}$/); // 暂时用4位的
      if (!re.test(this.form.checkCode)) {
        this.$notify.error({
          title: "错误",
          message: "密码要求长度4~16位,字母，数字，下划线，减号!"
        });
        return false;
      }

      // 一般post post提交吧,后面代码回调里

      loginIn().then(res => {
        console.log(res, "result");

        //登陆成功后 看密码是否需要记录
        if (this.form.quickLogin) {
          localStorage.setItem("quickLogin", true);
        } else {
          localStorage.removeItem("quickLogin");
        }

        this.$message({
          duration: 1000,
          message: "登陆成功,正在跳转...",
          onClose: function() {
            var toPath = "/Home";
            that.$router.push({
              //你需要接受路由的参数再跳转
              path: toPath
            });
          }
        });
      });
    },
    resetGo: function() {
      this.form.loginName = "";
      this.form.pwd = "";
      this.form.checkCode = "";
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss" scoped>
.LogiPage {
  width: 100%;
  height: 100%;
  position: relative;
  background: url(../assets/2.jpg) no-repeat;
  background-size: cover;
}

.login-form {
  width: 360px;
  height: 360px;
  border: 1px #f2f2f2 solid;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: relative;
  background-color: white;
  padding: 20px;
  border-radius: 4px;
}
.input_wrap {
  margin-top: 15px;
  line-height: 40px;
  height: 40px;
  /* background-color: orangered; */
}

.input_title {
  font-size: 14px;
  color: #2e3740;
  text-align: right;
  padding-right: 5px;
  width: 80px;
}

.input_title::after {
  content: "ï¼š";
}

.input_main {
  font-size: 14px;
  height: 100%;
  width: 320px;
}

.input_item {
  width: 100%;
  height: 100%;
  border: thin #dddee0 solid;
  border-radius: 4px;
  padding: 0px 15px;
  outline: none !important;
}

.input_item:focus {
  border: thin #47b774 solid;
}

.check_code_main .checkCode {
  width: 196px;
  float: left;
}

.check_code_main .checkCodeImage {
  width: 118px;
  margin-left: 4px;
  float: right;
  cursor: pointer;
}

.btns_wrap {
  text-align: center;
}

.btns_wrap .m_btn {
  width: 156px;
}

.my-card {
  width: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

label.chk {
  font-size: 14px;
  cursor: pointer;
}

label.chk i {
  font-size: 14px;
  font-style: normal;
  display: inline-block;
  width: 14px;
  height: 14px;
  text-align: center;
  line-height: 12px;
  color: #fff;
  vertical-align: middle;
  margin: -2px 4px 1px 0px;
  border: #47b774 thin solid;
}

label.chk input[type="checkbox"],
input[type="radio"] {
  display: none;
}

label.chk input[type="radio"] + i {
  border-radius: 7px;
}

label.chk input[type="checkbox"]:checked + i,
input[type="radio"]:checked + i {
  background: #339a5c;
}

label.chk input[type="checkbox"]:disabled + i,
input[type="radio"]:disabled + i {
  border-color: #ccc;
}

label.chk input[type="checkbox"]:checked:disabled + i,
input[type="radio"]:checked:disabled + i {
  background: #ccc;
}

.m_btn {
  line-height: 30px;
  height: 30px;
  padding: 0px 15px;
  font-size: 14px;
  border: thin #dddee0 solid;
  background-color: #f6f6f7;
  border-radius: 2px;
  outline: none;
  cursor: pointer;
  word-spacing: 10px;
}

.m_btn.m_btn_large {
  line-height: 40px;
  height: 40px;
  padding: 0px 20px;
  font-size: 14px;
  border: thin #dddee0 solid;
  background-color: #f6f6f7;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  word-spacing: 10px;
}

.m_btn.m_green {
  background-color: #47b774;
  border: thin #47b774 solid;
  color: white;
}

.m_btn:hover {
  background-color: #eee;
}

.m_btn.m_green:hover {
  background-color: #339a5c;
  border: thin #339a5c solid;
}

a {
  text-decoration: none !important;
}
</style>
